Styled Components

基礎用法

參考文件：Basics

const 元件名稱 = styled.標籤名稱：把 CSS 寫成 component 的感覺

const Description = styled.p`
color: red;
padding: 20px;
border: 1px solid black;
`

const 元件名稱 = styled(已存在的 style component)：擴張 style，在 styled 元件再加上 style
```
const RedButton = styled(Button)`
color: pink;
`;
```

props => props.參數名稱 ? value1 : value2：用 function 決定 style 的值

const Button = styled.button`
background: ${props => props.primary ? "palevioletred" : "white"};
`
<Button>Normal</Button>
<Button primary>Custom Button</Button>

<component as="">：改變元素的標籤

<Button>Normal</Button>
<Button as="a" href="/">Primary</Button>

props.自訂屬性：在 styled component 自訂屬性，再把值寫到 react component 裡面

const Button = styled.button`
background: palevioletred;
color: ${props => props.buttonColor || "white"};
`
<Button>Normal</Button>
<Button buttonColor="rebeccapurple">Custom Button</Button>

在 style component 開頭加上 Styled，區分 react component
```
const StyledCounter = styled.div``
```

在 render 的元件外面定義 styled component，不要定義在裡面

const StyledWrapper = styled.div`
/* ... */
`
const Wrapper = ({ message }) => {
return <StyledWrapper>{message}</StyledWrapper>
}

styled(已知的 styled component).attrs：重複利用 style 的屬性

const Input = styled.input.attrs(props => ({
type: "text",
size: props.size || "1em",
}))
const PasswordInput = styled(Input).attrs({
type: "password",
})`

使用 keyframes

// 先引入 keyframes
import styled, { keyframes } from 'styled-components';
// 寫 keyframe
const rotate = keyframes`
from {
  transforom: rotate(0deg);
}
to {
  transform: rotate(360deg);
}
`
// 帶入 animation 
const Rotate = styled.div`
display: inline-block;
animation: ${rotate} 2s linear infinite;
padding: 2rem 1rem;
font-size: 1.2rem;
`;